<template lang="html">
  <section class="components-common_register_panel-select">
    <h1 class="select-title">{{title}}:</h1>
    <ul class="select-options" v-if="dist.length > 0">
      <li
        class="option-item"
        :class="{ active:index === selectedIndex || selectedCollection.indexOf(index) > -1 }"
        @click="selectItem(index)"
        v-for="(item, index) in dist"
      >
        <span>{{item.value}}</span>
        <i class="icon-select"></i>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
    },
    title: {
      type: String,
    },
    defaultIndex: {
      type: Number,
      default: 0
    },
    dist: {
      type: Array,
      require: true
    },
    multiSelect: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      selectedIndex: '',
      selectedCollection: []
    }
  },
  watch: {
    selectedIndex(val){
      this.$emit('dispatchValue', {
        key: this.name,
        value: val
      })
    },
    selectedCollection(val){
      this.$emit('dispatchValue', {
        key: this.name,
        value: val
      })
    },
  },
  created(){
    if(typeof this.defaultIndex === 'number'){
      if(this.multiSelect){
        this.setIndex(this.defaultIndex)
      } else {
        this.selectedIndex = this.defaultIndex
      }
    }
  },
  methods: {
    selectItem(index){
      if(!this.multiSelect){
        this.selectedIndex = index
      } else {
        this.setIndex(index)
      }
    },
    setIndex(value){
      let index = this.selectedCollection.indexOf(value)
      if(index < 0){
        this.selectedCollection.push(value)
      } else {
        this.selectedCollection.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../css/config";
.components-common_register_panel-select{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-left: 20%;
  margin-top: 15px;
  margin-bottom: 10px;
  h1{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 30px;
    color: #000;
    letter-spacing: 1Px;
  }
  .select-options{
    display: inline-block;
    white-space: normal;
    width: 100%;
    color: #000;
    .option-item{
      display: inline-block;
      width: 162px;
      box-sizing: border-box;
      padding-left: 55px;
      margin-bottom: 40px;
      letter-spacing: 1Px;
      line-height: 30px;
      font-size: 0;
      white-space: nowrap;
      &.active{
        .icon-select{
          background-color: $common-red;
          &:before{
            position: absolute;
            display: block;
            content: '';
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 28px;
            height: 28px;
            border-radius: 100%;
            border: 1px solid $common-red;
            background-color: transparent;
          }
        }
      }
      span{
        display: inline-block;
        font-size: 30px;
        vertical-align: middle;
        margin-right: 20px;
      }
      .icon-select{
        position: relative;
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        border-radius: 100%;
        background-color: #cfcfd0;
      }
    }
  }
}
</style>
